@import "../../styles/mixin";
//
.k-btn {
  .btn;
  &-long {
    width: 100%;
  }
  &-default {
    .button-variant(
      @background-init-color; @btn-default-color; @border-color-base
    );
  }
  &-success {
    .button-variant(@success-color);
  }
  &-primary {
    .button-variant(@primary-color);
  }
  &-warning {
    .button-variant(@warning-color);
  }
  &-error {
    .button-variant(@error-color);
  }
  &-info {
    .button-variant(@info-color);
  }
  &-square {
    border-radius: 0;
  }
  &-circle,
  &-circle-outline {
    border-radius: 2 * @btn-border-radius;
  }
  &-plain {
    background: transparent;
    &:hover {
      background: transparent;
    }
  }
  &::after {
    content: "";
    border-radius: 20rpx;
    .square(200%);
    .custom-position(absolute, @left:0, @top:0);
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
  }
}
.btn() {
  margin: 0;
  font-weight: normal;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  user-select: none;
  padding: 0 36rpx;
  .center-middle-flex(@display:inline-flex);
  .button-size(@btn-font-size; @btn-height; @btn-border-radius-sl);
  .text {
    padding-left: 12rpx;
  }
  &,
  &:active,
  &:focus {
    outline: 0;
  }

  &:not([disabled]):hover {
    text-decoration: none;
  }

  &:not([disabled]):active {
    outline: 0;
  }

  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;
    }
  }
  &-large {
    .button-size(@btn-font-size-lg; @btn-height-lg; @btn-border-radius-lg);
    padding: 0 60rpx;
  }
  &-small {
    .button-size(@btn-font-size-sl; @btn-height-sl; @btn-border-radius-sl);
    padding: 0 20rpx;
  }
}
// mixin
.button-size(@size; @height; @border-radius) {
  height: @height;
  font-size: @size;
  border-radius: @border-radius;
}
.button-style(@background;@color; @border) {
  color: @color;
  background-color: @background;
  border: 2rpx solid @border;
  &.k-btn-plain {
    border-color: @color;
  }
  // a inside Button which only work in Chrome
  // http://stackoverflow.com/a/17253457
  > a:only-child {
    color: currentColor;
    &:after {
      content: "";
      .custom-position(absolute, @top:0, @left:0, @bottom:0, @right:0);
      background: transparent;
    }
  }
}
.button-variant(@background:null; @color:@font-initialize-color;@border:null) {
  .button-style(@background; @color; @border);
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      opacity: 0.7;
    }
  }
}
